<template>
  <el-main style="padding:0px; margin-top:8px;margin-left:17px">
    <el-container>
      <el-container>
        <el-header
          style="margin-top:5px; padding:0; width:685px; border-bottom:2px solid #0c4c8e "
          height="35px"
        >
          <span class="table">教师课表</span>
        </el-header>
        <el-main
          style="margin-top:5px;margin-left:10px; height:225px; width:675px; padding:0"
        >
          <courseTable ref="courseTableArea"></courseTable>
        </el-main>
      </el-container>
      <el-container style="margin-left:50px">
        <el-container>
          <el-header
            style="margin-top:5px; padding:0; width:410px; border-bottom:2px solid #0c4c8e "
            height="35px"
          >
            <span class="table">日程安排</span>
          </el-header>
          <el-main
            style="padding:0;margin-top:5px;height:225px;; width:430px;height:250px;"
          >
            <calendar></calendar>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <el-container>
      <el-container>
        <el-header
          style="margin-top:0px; padding:0; width:100%; border-bottom:2px solid #0c4c8e "
          height="35px"
        >
          <span class="table">课程列表</span>
        </el-header>
        <courseList ref="courseListArea" style="display: absolute"></courseList>
      </el-container>
    </el-container>
  </el-main>
</template>

<script>
import topBar from "./topBar.vue";
import calendar from "./calendar.vue";
import personProfile from "./personProfile.vue";
import courseList from "./courseList.vue";
import courseTable from "./courseTable.vue";

export default {
  components: {
    topBar,
    calendar,
    personProfile,
    courseList,
    courseTable,
  },
  data() {
    return {
      courseInfo: [{}],
    };
  },
  methods: {
    //在此调用后端接口返回教师所有课程信息
    returnAllCourseInfo() {
      let options = {
        teacherId: this.$store.state.id,
      };
      this.$http
        .post(this.$api.CourseMonitorGetCourseListOfT, options)
        .then((resp) => {
          if (resp.success) {
            // console.log(resp.data);
            this.$refs.courseTableArea.courseInfo = resp.data;
            this.$refs.courseListArea.courseInfo = resp.data;
            this.$refs.courseListArea.handleCurrentChange(1);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
  },
  mounted() {
    this.returnAllCourseInfo();
  },
};
</script>

<style lang="less" scoped>
.table {
  font-size: 18px;
  color: #666666;
  border-top: 2px solid #0c4c8e;
  border-left: 1px solid #b0b4b8;
  border-right: 1px solid #b0b4b8;
  padding: 10px;
  padding-top: 2px;
  border-radius: 2px;
}
</style>
